<template>
  <v-chart class="h-80 w-full" :option="option"/>
</template>
<script setup lang="ts" name="log-line-chart">
import VChart from "vue-echarts";
import {formatPast} from '/@/utils/formatTime';
import {getSum} from '/@/api/admin/log';
import {use} from 'echarts/core'
import {LineChart} from 'echarts/charts'
import {GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent} from 'echarts/components'
import {CanvasRenderer} from 'echarts/renderers'

use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent,
  LineChart,
  CanvasRenderer
])


const option = reactive(
    {
      title: {
        text: '近30天请求汇总'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['成功', '失败'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '成功',
          type: 'line',
          stack: 'Total',
          data: [],
        },
        {
          name: '失败',
          type: 'line',
          stack: 'x',
          data: [],
          itemStyle: {
            color: '#a90000'
          }
        }
      ]
    }
)

onMounted(() => {
  getSum().then(res => {
    option.xAxis.data = res.data.map(item => formatPast(new Date(item.log_date), 'mm-dd'))
    option.series[0].data = res.data.map(item => item.successful_count)
    option.series[1].data = res.data.map(item => item.failed_count)
  })
})
</script>
